<!doctype html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head th:replace="common::heads(~{::title},~{},~{},~{})">
  <title>部门管理</title>
</head>
<body class="bg-body-tertiary py-3">
<div class="container-fluid">
  <div class="card border-0 shadow-sm">
    <div class="card-header bg-body py-3">
      <form action="#" class="row row-cols-sm-auto g-3 align-items-center">
        <div class="col-12">
          <div class="row">
            <label class="col-sm-auto col-form-label" for="searchName">部门名称</label>
            <div class="col">
              <input class="form-control" id="searchName" name="searchName" placeholder="请输入部门名称" type="text">
            </div>
          </div>
        </div>
        <div class="col-12 gap-2">
          <button class="btn btn-light bsa-querySearch-btn" type="button">
            <i class="bi bi-search"></i>搜索
          </button>
          <button class="btn btn-light bsa-reset-btn" type="button">
            <i class="bi bi-arrow-clockwise"></i>重置
          </button>
        </div>
      </form>
    </div>

    <div class="card-body">
      <div class="d-flex flex-wrap gap-2 mb-2" id="toolbar">
        <button class="btn btn-light add-btn"><i
          class="bi bi-plus"></i> 新增
        </button>
        <button class="btn btn-light batch-btn" disabled><i class="bi bi-trash"></i> 批量删除</button>
      </div>
      <table id="table"></table>
    </div>

    <!-- 新增和修改的模态框-start -->
    <div aria-hidden="true" aria-labelledby="myModalLabel" class="modal fade" data-bs-backdrop="static" data-bs-keyboard="false" id="myModal" tabindex="-1">
      <div class="modal-dialog modal-dialog-centered" style="width: 500px;cursor: move">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="myModalTitle">Modal title</h5>
            <button aria-label="Close" class="btn-close" data-bs-dismiss="modal" type="button"></button>
          </div>
          <div class="modal-body" style="height: 200px; overflow-y: auto;">
            <form id="form">
              <input id="id" name="id" type="hidden">
              <div class="row mb-3">
                <label class="col-sm-3 col-form-label text-sm-end" for="name">部门名称</label>
                <div class="col-sm-9">
                  <input class="form-control" id="name" name="name" placeholder="请输入部门名称" type="text">
                </div>
              </div>
            </form>
          </div>
          <div class="modal-footer">
            <button class="btn btn-danger" data-bs-dismiss="modal" type="button">关闭</button>
            <button class="btn btn-primary" form="form" id="save" type="submit">保存</button>
          </div>
        </div>
      </div>
    </div>
    <!-- 新增和修改的模态框-end -->
  </div>
</div>
<!--回到顶部开始-->
<a class="bsa-back-to-top" href="javaScript:"><i class='bi bi-arrow-up-short'></i></a>
<!--回到顶部结束-->

<th:block th:replace="common::scripts(~{})"></th:block>

<script>
  $(function () {
    const myModal = new bootstrap.Modal(document.getElementById('myModal'), {keyboard: false});

    $('#table').bootstrapTable({
      // height: 500,//设置高度，就可以固定表头
      /*请求部分*/
      url: '/admin/dept/list',//请求地址
      method: 'get',// 请求方法
      dataType: 'json',// 请求得到的数据类型
      responseHandler: function (res) {
        console.log(JSON.stringify(res));
        return {'total':res.total,'rows':res.list};
      },
      /*分页部分*/
      pagination: true,//是否开启分页
      sidePagination: 'server',//是客户端分页还是服务端分页  'client','server',由于演示没有后端提供服务，所以采用前端分页演示
      pageNumber: 1,// 初始化加载第一页，默认第一页
      pageSize: 2,//默认显示几条
      pageList: [2, 4, 6, 10, 100],//可供选择的每页的行数 - (亲测大于1000存在渲染问题)
      paginationLoop: true,//在上百页的情况下体验较好 - 能够显示首尾页
      paginationPagesBySide: 2,// 展示首尾页的最小页数
      queryParamsType:'',

      idField: 'id',// 每行的唯一标识字段
      clickToSelect: true,// 是否启用点击选中行
      showToggle: true,// 是否显示详细视图和列表视图的切换按钮

      toolbar: '#toolbar',// 工具按钮容器
      showColumns: true,// 是否显示所有的列
      showRefresh: true,// 是否显示刷新按钮
      showButtonIcons: true,// 显示图标
      showButtonText: false,// 显示文本
      showFullscreen: true,// 显示全屏
      showPaginationSwitch: false,// 开关控制分页
      undefinedText: '-',// 当字段为 undefined 显示
      sortOrder: "asc",// 排序方式
      buttonsClass: 'light',// 按钮的类
      buttonsPrefix: 'btn',// 类名前缀
      iconsPrefix: 'bi',// 图标前缀
      iconSize: undefined,// 图标大小 undefined sm lg
      // 图标的设置  这里只做了一个演示，可设置项目参考 https://examples.bootstrap-table.com/#options/table-icons.html
      icons: {fullscreen: 'bi-arrows-fullscreen'},
      onPostBody: function () {
        //重新启用弹出层,否则formatter格式化函数返回的html字符串上的tooltip提示不生效
        $('[data-bs-toggle="tooltip"]').each(function (i, el) {
          new bootstrap.Tooltip(el)
        })
      },
      //头部的那个复选框选中事件
      onCheckAll: function (row) {
        batchBtnStatusHandle()
      },
      //单行选中事件
      onCheck: function (row) {
        batchBtnStatusHandle()
      },
      //单行取消选中事件
      onUncheck: function (row) {
        batchBtnStatusHandle()
      },
      //头部的那个复选框取消选中事件
      onUncheckAll: function (row) {
        batchBtnStatusHandle()
      },
      //加载模板,不改的话，默认的会超出不好看
      loadingTemplate: function () {
        return '<div class="spinner-grow" role="status"><span class="visually-hidden">Loading...</span></div>';
      },
      //params是一个对象
      queryParams: function (params) {
        const param = {pageSize: params.pageSize, pageNum: params.pageNumber};
        if($('#searchName').val().trim()!==''){
          param.name=$('#searchName').val();
        }
        return param;
      },
      //列
      columns: [
        {checkbox: true,visible: true},
        {
          title: 'ID',
          field: 'id',
          // 使用[align]，[halign]和[valign]选项来设置列和它们的标题的对齐方式。h表示横向，v标识垂直
          align: 'center',
          // 是否作为排序列
          sortable: true,
          // 当列名称与实际名称不一致时可用
          sortName: 'id',
          switchable: false,
          // 列的宽度
          width: 8,
          // 宽度单位
          widthUnit: 'rem'
        },
        {
          title: '部门名称',
          field: 'name',
          align: 'center'
        },
        {
          title: '操作',
          align: 'center',
          formatter: (value,row)=>{
            let html = '';
            html += `<button type="button" class="btn btn-light btn-sm edit-btn" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="修改部门"><i class="bi bi-pencil"></i></button>`
            html += `<button type="button" class="btn btn-light btn-sm del-btn mx-1" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="删除"><i class="bi bi-trash3"></i></button>`
            return html;
          },
          events: {//定义当前列字段中的元素的事件
            'click .edit-btn': function (event, value, row, index) {
              event.stopPropagation();
              $('#myModalTitle').text('修改部门');
              $('#id').val(row.id);
              $('#name').val(row.name);
              myModal.show();
            },'click .del-btn': function (event, value, row, index) {
              event.stopPropagation();
              $.modal({body: '确定要删除部门【' + row.name + '】?',ok: function () {
                  $.ajax({url: '/admin/dept/delete',data:{id:row.id}, method: 'delete',}).then(response => {
                    if (response.flag) {
                      $('#table').bootstrapTable('refresh');
                      $.toasts({type: 'success',delay: 1500,content: response.msg,placement:'bottom-right'});
                    }else{
                      alert(response.msg)
                    }
                  });
                }
              });
            }
          }
        }
      ]
    });

    // 点击新增部门显示模态窗口
    $('.add-btn').on('click', function () {
      $('#form')[0].reset();//重置表单数据
      $('#form').formValidation('resetForm');//重置验证状态
      $('#myModalTitle').text('新增部门');
      myModal.show();
    })

    //执行新增和修改时候的提交数据部分
    $('#form').formValidation({
      fields: {
        name: {
          validators: {
            notEmpty: {message:'部门名称不能为空'},
            stringLength:{min:2,max:10,message: '部门名称长度在2到10个字符之间'}
          }
        }
      }
    }).on('success.form.fv', function (e) {
      e.preventDefault();//阻止表单提交
      let $form = $(e.target);//得到表单对象
      let data = $form.serialize();//获取数据
      $.ajax({url: '/admin/dept/addOrUpdate',data: data,method: 'post'}).then(response => {
        if (response.flag) {
          $('#table').bootstrapTable('refresh');//刷新bootstrapTable数据
          const totalRows = $('#table').bootstrapTable('getOptions').totalRows;//获取当前表格的总行数
          const pageSize = $('#table').bootstrapTable('getOptions').pageSize;//获取当前表格的每页显示几条数据
          const lastPage = Math.ceil(totalRows / pageSize);//计算总页数
          $('#table').bootstrapTable('selectPage', lastPage)//跳转到第一页
          $('#form')[0].reset();//重置表单数据
          $('#form').formValidation('resetForm');//重置验证状态
          myModal.hide();//隐藏模态窗口
          $.toasts({type: 'success',delay: 1500,content: response.msg,placement:'bottom-right'});
        }else{
          alert(response.msg)
        }
      });
    });

    //批量处理
    $('.batch-btn').on('click', function () {
      //获取所有选中行的id
      let ids = [];
      let rowSelected = $("#table").bootstrapTable('getSelections');
      $.each(rowSelected, function (index, row) {
        ids.push(row.id);
      });

      $.modal({body: '确定要删除所选部门?',ok: function () {
          $.ajax({url:'/admin/dept/deletes',data: JSON.stringify(ids), method: 'delete',contentType: 'application/json; charset=utf-8',dataType: 'json'}).then(response => {
            if (response.flag) {
              $('#table').bootstrapTable('refresh');//刷新bootstrapTable数据
              const totalRows = $('#table').bootstrapTable('getOptions').totalRows;//获取当前表格的总行数
              const pageSize = $('#table').bootstrapTable('getOptions').pageSize;//获取当前表格的每页显示几条数据
              const lastPage = Math.ceil(totalRows / pageSize);//计算总页数
              $('#table').bootstrapTable('selectPage', lastPage)//跳转到第一页
              $.toasts({type: 'success',delay: 1500,content: response.msg,placement:'bottom-right'});
            }else{
              alert(response.msg)
            }
          });
        }
      });
    })

    //处理批量按钮的disabled状态
    function batchBtnStatusHandle() {
      let rowSelected = $("#table").bootstrapTable('getSelections');
      if (rowSelected.length > 0) {
        $('.batch-btn').attr('disabled', false)
      } else {
        $('.batch-btn').attr('disabled', true)
      }
    }

    //搜索处理
    $('.bsa-querySearch-btn').on('click', function () {
      $('#table').bootstrapTable('refresh');
      $('#table').bootstrapTable('selectPage', 1)//跳转到第一页
    })

    //重置处理
    $('.bsa-reset-btn').on('click', function () {
      //把所有的字段都恢复默认值
      $('#name').val('');
      //刷新回到第一页
      $('#table').bootstrapTable('refresh');
      $('#table').bootstrapTable('selectPage', 1)//跳转到第一页
    })

    //拖拽移动模态窗口
    draggableModal('myModal');
  });

</script>

</body>
</html>
